import { faker } from "@faker-js/faker";
import { ChartColumnIncreasingIcon, ListFilterIcon } from "lucide-react";
import {
  Bar,
  BarChart,
  CartesianGrid,
  ResponsiveContainer,
  Tooltip,
} from "recharts";
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { IssueDistributionTooltip } from "./chart-tooltip";

const template = {
  start: 1752080015446,
  failed: 20,
  bug: 6,
  script: 8,
  env: 4,
  todo: 4,
};

const data = Array.from({ length: 60 }, (_, index) => ({
  start: template.start + index * 1000 * 60 * 60 * 24,
  failed: faker.number.int({ min: 10, max: 30 }),
  bug: faker.number.int({ min: 5, max: 10 }),
  script: faker.number.int({ min: 5, max: 10 }),
  env: faker.number.int({ min: 1, max: 5 }),
  todo: faker.number.int({ min: 1, max: 10 }),
}));

export function IssueDistribution() {
  return (
    <div className="flex h-full flex-col rounded-lg border bg-card text-card-foreground shadow-sm">
      <div className="flex items-center justify-between border-b px-4 py-2">
        <div className="flex items-center gap-2 text-sm">
          <ChartColumnIncreasingIcon className="size-4 text-primary" />
          <span className="font-semibold">Distribution</span>
        </div>
        <Popover>
          <PopoverTrigger asChild>
            <ListFilterIcon
              size={16}
              aria-hidden="true"
              className="hover:cursor-pointer"
            />
          </PopoverTrigger>
          <PopoverContent className="w-32 p-2" align="end">
            <div className="grid gap-2">
              <div className="flex items-center gap-2">
                <Checkbox id="bug" defaultChecked={true} />
                <Label htmlFor="bug">Bug</Label>
              </div>
              <div className="flex items-center gap-2">
                <Checkbox id="script" defaultChecked={true} />
                <Label htmlFor="script">Script</Label>
              </div>
              <div className="flex items-center gap-2">
                <Checkbox id="env" defaultChecked={true} />
                <Label htmlFor="env">Env</Label>
              </div>
              <div className="flex items-center gap-2">
                <Checkbox id="undo" defaultChecked={true} />
                <Label htmlFor="undo">Undo</Label>
              </div>
            </div>
          </PopoverContent>
        </Popover>
      </div>
      <div className="h-full p-4">
        <ResponsiveContainer width="100%" height="100%">
          <BarChart
            accessibilityLayer
            data={data}
            margin={{
              left: -4,
              right: -4,
              top: 0,
              bottom: 0,
            }}
          >
            <Tooltip content={<IssueDistributionTooltip />} />
            <CartesianGrid strokeDasharray="3 3" stroke="var(--accent)" />
            <Bar
              dataKey="bug"
              stackId="issue"
              order={4}
              fill="var(--chart-4)"
            />
            <Bar
              dataKey="script"
              stackId="issue"
              order={3}
              fill="var(--chart-3)"
            />
            <Bar
              dataKey="env"
              stackId="issue"
              order={2}
              fill="var(--chart-2)"
            />
            <Bar
              dataKey="todo"
              stackId="issue"
              order={1}
              fill="var(--chart-1)"
            />
          </BarChart>
        </ResponsiveContainer>
      </div>
    </div>
  );
}
